<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        body {
            background: url("/image/body_bg.jpg") no-repeat fixed;
            background-size: cover;
        }
        .login {
            position: absolute;
            top: 40%;
            transform: translate(-50%, -50%);
            left: 50%;
            color: cyan;
        }
        .login h1 {
            text-align: center;
        /*margin-bottom: 20%;*/
        font-size: 40px;
        }
        .login form {
            text-align: center;
            margin: 10px;
        }
        .login input {
            position: relative;
            margin: 10px;
            padding: 10px;
        }
        #captchaImag {
            position: relative;
            top: 15px;
            left: -5%;
        }
        #captchaCode {
            width: 80px;
            left: -2%;
        }

        #login {
            background-color: aquamarine;
            width: 200px;
            height: 40px;
            top: 97%;
            left: 4%;
            position: absolute;
        }
        #msg {
            /*opacity: 0;*/
            display: none;
        }

    </style>
    <script src="/js/jquery-3.2.1.min.js"></script>

</head>
<body>
<div class="login">
    <h1>login</h1>
    <form method="post" action="/login">
        <input id="username" type="text" name="username" placeholder="username">
        <br/>
        <input id="password" type="password" name="password" placeholder="password">
        <br/>
        <input id="captchaCode" type="text" name="captchaCode" placeholder="captcha code">
        <img id="captchaImag" src="/home/captcha" height="39" width="80" onclick="captcha()">
        <input id="login" type="submit" value="log in">
    </form>
</div>
<p th:text="${msg}" id="msg"></p>
</body>
<script>
    function captcha() {
        $("#captchaImag")[0].src = "/home/captcha?time="+new Date();
    }
    window.onload = function () {
        var msg = $("#msg");
        if(msg.text() != "") {
            alert(msg.text());
        }
    }
</script>

</html>